<template>
  <div class="customContent">
    <div ref="customOptions" style="width: 635px; height: 550px"></div>
  </div>
</template>

<script>
import colorList from "../../utils/color.js";
import * as fuc from "../../filters/index.js";
export default {
  data() {
    return {
      list: [
        {
          name: "张三1",
          post: "前端1",
          nature: "正式",
          no: "1",
          spaceId: "1",
          group: "数据",
          spaceName: "标品-KA看板",
          weeks: [{ week: "1-3" }, { week: "6-7" }]
        },
        {
          name: "张三2",
          post: "前端2",
          nature: "正式",
          no: "2",
          spaceId: "2",
          group: "数据1",
          spaceName: "标品-KA看板1",
          weeks: [{ week: "5-9" }, { week: "11-12" }]
        },
        {
          name: "张三3",
          post: "前端3",
          nature: "正式",
          no: "3",
          spaceId: "3",
          group: "数据2",
          spaceName: "标品-KA看板2",
          weeks: [{ week: "1-6" }, { week: "7-10" }]
        },
        {
          name: "张三4",
          post: "前端4",
          nature: "正式",
          no: "4",
          spaceId: "4",
          group: "数据3",
          spaceName: "标品-KA看板3",
          weeks: [{ week: "1-2" }, { week: "4-10" }]
        },
        {
          name: "张三5",
          post: "前端5",
          nature: "正式",
          no: "5",
          spaceId: "5",
          group: "数据4",
          spaceName: "标品-KA看板4",
          weeks: [{ week: "1-5" }, { week: "8-11" }]
        },
        {
          name: "张三6",
          post: "前端6",
          nature: "正式",
          no: "6",
          spaceId: "6",
          group: "数据5",
          spaceName: "标品-KA看板5",
          weeks: [{ week: "1-7" }, { week: "9-11" }]
        },
        {
          name: "张三7",
          post: "前端7",
          nature: "正式",
          no: "7",
          spaceId: "7",
          group: "数据6",
          spaceName: "标品-KA看板6",
          weeks: [{ week: "1-8" }, { week: "11-12" }]
        },
        {
          name: "张三8",
          post: "前端8",
          nature: "正式",
          no: "8",
          spaceId: "8",
          group: "数据7",
          spaceName: "标品-KA看板7",
          weeks: [{ week: "1-9" }]
        },
        {
          name: "张三9",
          post: "前端9",
          nature: "正式",
          no: "9",
          spaceId: "9",
          group: "数据8",
          spaceName: "标品-KA看板8",
          weeks: [{ week: "1-6" }, { week: "7-9" }]
        },
        {
          name: "张三10",
          post: "前端10",
          nature: "正式",
          no: "10",
          spaceId: "10",
          group: "数据9",
          spaceName: "标品-KA看板9",
          weeks: [{ week: "1-7" }]
        },
        {
          name: "张三11",
          post: "前端11",
          nature: "正式",
          no: "11",
          spaceId: "11",
          group: "数据10",
          spaceName: "标品-KA看板10",
          weeks: [{ week: "1-3" }, { week: "6-7" }]
        },
        {
          name: "张三12",
          post: "前端12",
          nature: "正式",
          no: "12",
          spaceId: "12",
          group: "数据11",
          spaceName: "标品-KA看板11",
          weeks: [{ week: "5-9" }, { week: "11-12" }]
        },
        {
          name: "张三13",
          post: "前端13",
          nature: "正式",
          no: "13",
          spaceId: "13",
          group: "数据12",
          spaceName: "标品-KA看板12",
          weeks: [{ week: "1-5" }, { week: "8-10" }]
        },
        {
          name: "张三14",
          post: "前端14",
          nature: "正式",
          no: "14",
          spaceId: "14",
          group: "数据13",
          spaceName: "标品-KA看板13",
          weeks: [{ week: "1-2" }, { week: "6-10" }]
        },
        {
          name: "张三15",
          post: "前端15",
          nature: "正式",
          no: "15",
          spaceId: "15",
          group: "数据14",
          spaceName: "标品-KA看板14",
          weeks: [{ week: "1-5" }, { week: "7-11" }]
        },
        {
          name: "张三16",
          post: "前端16",
          nature: "正式",
          no: "16",
          spaceId: "16",
          group: "数据15",
          spaceName: "标品-KA看板15",
          weeks: [{ week: "1-7" }, { week: "9-11" }]
        },
        {
          name: "张三17",
          post: "前端17",
          nature: "正式",
          no: "17",
          spaceId: "17",
          group: "数据16",
          spaceName: "标品-KA看板16",
          weeks: [{ week: "1-8" }, { week: "11-12" }]
        },
        {
          name: "张三18",
          post: "前端18",
          nature: "正式",
          no: "18",
          spaceId: "18",
          group: "数据17",
          spaceName: "标品-KA看板17",
          weeks: [{ week: "1-6" }]
        },
        {
          name: "张三19",
          post: "前端19",
          nature: "正式",
          no: "19",
          spaceId: "19",
          group: "数据18",
          spaceName: "标品-KA看板18",
          weeks: [{ week: "1-6" }, { week: "7-9" }]
        },
        {
          name: "张三20",
          post: "前端20",
          nature: "正式",
          no: "20",
          spaceId: "20",
          group: "数据19",
          spaceName: "标品-KA看板19",
          weeks: [{ week: "1-7" }]
        },
        {
          name: "张三21",
          post: "前端21",
          nature: "正式",
          no: "21",
          spaceId: "21",
          group: "数据20",
          spaceName: "标品-KA看板20",
          weeks: [{ week: "1-3" }, { week: "6-7" }]
        },
        {
          name: "张三22",
          post: "前端22",
          nature: "正式",
          no: "22",
          spaceId: "22",
          group: "数据21",
          spaceName: "标品-KA看板21",
          weeks: [{ week: "5-9" }, { week: "11-12" }]
        },
        {
          name: "张三23",
          post: "前端23",
          nature: "正式",
          no: "23",
          spaceId: "23",
          group: "数据22",
          spaceName: "标品-KA看板22",
          weeks: [{ week: "1-6" }, { week: "7-10" }]
        },
        {
          name: "张三24",
          post: "前端24",
          nature: "正式",
          no: "24",
          spaceId: "24",
          group: "数据23",
          spaceName: "标品-KA看板23",
          weeks: [{ week: "1-5" }, { week: "4-10" }]
        },
        {
          name: "张三25",
          post: "前端25",
          nature: "正式",
          no: "25",
          spaceId: "25",
          group: "数据24",
          spaceName: "标品-KA看板24",
          weeks: [{ week: "1-3" }, { week: "6-11" }]
        },
        {
          name: "张三26",
          post: "前端26",
          nature: "正式",
          no: "26",
          spaceId: "26",
          group: "数据25",
          spaceName: "标品-KA看板25",
          weeks: [{ week: "1-7" }, { week: "8-11" }]
        },
        {
          name: "张三27",
          post: "前端27",
          nature: "正式",
          no: "27",
          spaceId: "27",
          group: "数据26",
          spaceName: "标品-KA看板26",
          weeks: [{ week: "1-8" }, { week: "11-12" }]
        },
        {
          name: "张三28",
          post: "前端28",
          nature: "正式",
          no: "28",
          spaceId: "28",
          group: "数据27",
          spaceName: "标品-KA看板27",
          weeks: [{ week: "1-11" }]
        },
        {
          name: "张三29",
          post: "前端29",
          nature: "正式",
          no: "29",
          spaceId: "29",
          group: "数据28",
          spaceName: "标品-KA看板28",
          weeks: [{ week: "1-6" }, { week: "7-9" }]
        },
        {
          name: "张三30",
          post: "前端30",
          nature: "正式",
          no: "30",
          spaceId: "30",
          group: "数据29",
          spaceName: "标品-KA看板29",
          weeks: [{ week: "1-7" }]
        }
      ],
      customTimed: null,
      workingGroup: [], // 工作组
      projectDatas: [], // 项目名称
      temporaryLen: [], // 临时背景条
      newData: [], // 周期数据
      len: [],
      lenBg: [],
      num: 0,
      sizeWeeks: [],
      allWeek:['W1','W2','W3','W4','W5','W6','W7','W8','W9','W10','W11','W12',]
    };
  },
  mounted() {
    this.getApi();
  },
  methods: {
    setDisplayNum(num, arr) {
      //数据按个数分组存储
      const arrGroup = [];
      if (arr.length > 0) {
        for (let i = 0; i < arr.length; i += num) {
          arrGroup.push(arr.slice(i, i + num));
        }
      }
      return arrGroup;
    },
    formatArr(arr, n, num) {
      // 根据数组的长度，给其填充需要的数据
      let len = arr.length || 0;
      if (n <= len) {
        return arr.slice(0, n);
      }
      return arr.concat(new Array(n - len).fill(num)); //可填充所需数据类型
    },
    getApi() {
      const datas = this.list;

      this.num = datas.length;
      const data = [];
      let groupList = []; // 工作组
      let spaceNameList = []; // 项目名称
      const lenBgLen = [];
      const groupNum = Math.ceil(datas.length / 10); // 分为几页
      // console.log(datas,'datas');
      datas.forEach((item, index) => {
        lenBgLen.push(item.group);
        groupList.push(fuc.handleNameLen(item.group, 4));
        spaceNameList.push(fuc.handleNameLen(item.spaceName, 10));
        if (item.weeks.length == 0) {
          let Id = index % 10;
          data.push({
            value: [Id, 0, 0, "color" + Id]
          });
        } else {
          item.weeks.forEach(items => {
            // console.log(items,'items');
            let Id = index % 10;
            // Id = Id < 0 ? 9 : Id;
            // console.log(Id,'id');
            const week = items.week.split("-");
            if (week.length === 1) {
              week.push(Number(week[0]) + 1);
            }
            data.push({
              value: [Id, Number(week[0]), Number(week[1]), "color" + Id]
            });
          });
        }
      });
      groupList = groupList.concat(
        new Array(10 - (groupList.length % 10)).fill("")
      );
      spaceNameList = spaceNameList.concat(
        new Array(10 - (spaceNameList.length % 10)).fill("")
      );
      // console.log(datas,'datas');
      // 处理工作组的数据
      let newArr = [];
      let len = 0;
      for (let i = 0; i < data.length; i++) {
        const index = data[i].value[0];
        if (i < data.length - 1) {
          const _index = data[i + 1].value[0];
          if (index === 9) {
            if (_index === 0) {
              newArr.push(data.slice(len, i + 1));
              len = i + 1;
            }
          }
        }
      }
      if (len !== data.length) {
        newArr.push(data.slice(len, data.length));
      }
      // console.log(newArr,'newArr');
      // 初始化视图
      this.workingGroup = this.setDisplayNum(10, groupList)[0];
      this.projectDatas = this.setDisplayNum(10, spaceNameList)[0];
      this.temporaryLen = this.setDisplayNum(10, lenBgLen)[0];
      const aryLen = [];
      if (this.workingGroup) {
        this.len = this.formatArr(aryLen, this.workingGroup.length, "");
        const temproLen = this.temporaryLen ? this.temporaryLen.length : 0;
        this.lenBg = this.formatArr(aryLen, temproLen, 12);
      }
      this.newData = newArr[0];
      this.setCustomOptions();
      // console.log(this.newData,'this.newdata');
      // 写函数循环更新数据；
      clearInterval(this.customTimed);
      let currentIdx = 0;
      this.customTimed = setInterval(() => {
        if (currentIdx >= groupNum) {
          currentIdx = 0;
        }
        this.workingGroup = this.setDisplayNum(10, groupList)[currentIdx];
        this.projectDatas = this.setDisplayNum(10, spaceNameList)[currentIdx];
        this.temporaryLen = this.setDisplayNum(10, lenBgLen)[currentIdx];
        this.newData = newArr[currentIdx];
        if (this.workingGroup) {
          this.len = this.formatArr(aryLen, 10, "");
          const temproLen = this.temporaryLen ? this.temporaryLen.length : 0;
          this.lenBg = this.formatArr(aryLen, temproLen, 12);
          // this.lenBg = this.formatArr(aryLen,this.temporaryLen.length,12)
        }
        currentIdx++;
        this.setCustomOptions();
      }, 1000 * 10);
    },
    setCustomOptions() {
      const that = this;
      const myChartDom = this.$refs.customOptions;
      const myChart = this.$echarts.init(myChartDom);
      // var baseDate = `${new Date().getFullYear()}/${
      //   new Date().getMonth() + 1
      // }/${new Date().getDate()}`;
      // console.log(this.sizeWeek[0],'sizeweek');
      // echart配置
      const axisLines = "rgba(0,0,0,0)";
      var option = {
        color: "#0A8BFF",
        backgroundColor: "rgba(0,0,0,1)",
        title: {
          // text: '',
          // textStyle: {
          //     color: '#fff',
          //     fontSize: 18
          // },
          // subtext: '不同日期的当日工时统计'
        },
        tooltip: {
          enterable: true,
          //alwaysShowContent:true,
          hideDelay: 100,
          backgroundColor: "rgba(0,0,0,0.6)", //背景颜色（此时为默认色）
          borderRadius: 5, //边框圆角
          padding: [5, 0, 5, 0], // [5, 10, 15, 20] 内边距
          textStyle: {
            color: "#000"
          },
          position: function(point,params, dom) {
            // console.log(point);
            if (params.value[1] && params.value[2]) {
              $(dom).html(
                '<div style="font-size:14px;color:rgba(255,255,255,1)" class="tip"><p style="margin:0;padding:0 8px 0 8px;height:25px;display:flex;align-items: center;">项目排期计划:' +
                  that.allWeek[params.value[1] - 1] +
                  "~" +
                  that.allWeek[params.value[2] - 1] +
                  " </p></div>"
              );
            } else {
              $(dom).html('<div style="color:rgba(255,255,255,0)""></div>');
            }
          }
        },
        legend: {
          //图例
          data: [""],
          left: "90px",
          top: "0",
          itemWidth: 16,
          itemHeight: 16,
          selectedMode: false, // 图例设为不可点击
          textStyle: {
            color: "rgba(0, 0, 0, 0)",
            fontSize: 14
          }
        },
        grid: {
          //绘图网格
          left: "35%",
          right: "5%",
          top: "5%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: {
          // type: 'time',
          position: "top",
          interval: 1, //以一个小时递增
          max: 12,
          min: 1, //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
          axisLabel: {
            formatter: function(value) {
              return that.allWeek[value - 1];
            },
            textStyle: {
              color: "#C0E1FD", //更改坐标轴文字颜色
              fontSize: 12 //更改坐标轴文字大小
            },
            margin: 15
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.1)"
            }
          }
        },
        yAxis: [
          {
            inverse: true,
            splitLine: {
              show: false
            },
            axisTick: {
              length: 30,
              lineStyle: { color: axisLines }
            },
            axisLine: {
              lineStyle: { color: axisLines }
            },
            data: this.len
          },
          {
            name: "              项目",
            nameLocation: "start",
            nameTextStyle: {
              // fontWeight: 'bold',
              color: "#C0E1FD",
              fontSize: 14
            },
            position: "left",
            offset: 140,
            axisLine: {
              onZero: false,
              show: false
            },
            axisTick: {
              length: 70,
              inside: true,
              lineStyle: { color: axisLines }
            },
            axisLabel: {
              inside: true,
              color: "#88D4FF",
              align: "left",
              fontSize: 14
            },
            inverse: true,
            data: this.projectDatas
          },
          {
            name: "              工作组",
            nameLocation: "start",
            nameTextStyle: {
              // fontWeight: 'bold',
              color: "#C0E1FD",
              fontSize: 14
            },
            position: "left",
            offset: 220,
            axisLine: {
              onZero: false,
              show: false
            },
            axisTick: {
              length: 100,
              inside: true,
              lineStyle: { color: axisLines }
            },
            axisLabel: {
              inside: true,
              color: "#88D4FF",
              align: "left",
              fontSize: 14
            },
            inverse: true,
            data: this.workingGroup
          }
        ],
        series: [
          // 用空bar来显示三个图例
          // { name: "工时", type: 'bar', data: [],barMaxWidth:5 },
          // { name: state[1], type: 'bar', data: [],barMaxWidth:10 },
          // { name: state[2], type: 'bar', data: [],barMaxWidth:10 },
          {
            type: "custom",
            renderItem: function(params, api) {
              //开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
              var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
              var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
              var end = api.coord([api.value(2), categoryIndex]);
              // var height = api.size([0, 1])[1];
              var height = 8;
              return {
                type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                shape: that.$echarts.graphic.clipRectByRect(
                  {
                    // 矩形的位置和大小。
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                  },
                  {
                    // 当前坐标系的包围盒。
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                  }
                ),
                style: api.style()
              };
            },
            encode: {
              x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
              y: 0 // data 中『维度0』对应到 Y 轴
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  if (
                    params.data !== null &&
                    params.data["value"] &&
                    params.data["value"][3] == "color1"
                  ) {
                    return colorList.colorList[0];
                  } else if (
                    params.data !== null &&
                    params.data["value"] &&
                    params.data["value"][3] == "color2"
                  ) {
                    return colorList.colorList[1];
                  } else if (
                    params.data !== null &&
                    params.data["value"] &&
                    params.data["value"][3] == "color3"
                  ) {
                    return colorList.colorList[2];
                  } else if (
                    params.data !== null &&
                    params.data["value"] &&
                    params.data["value"][3] == "color4"
                  ) {
                    return colorList.colorList[3];
                  } else if (
                    params.data !== null &&
                    params.data["value"] &&
                    params.data["value"][3] == "color5"
                  ) {
                    return colorList.colorList[4];
                  } else if (
                    params.data !== null &&
                    params.data["value"] &&
                    params.data["value"][3] == "color6"
                  ) {
                    return colorList.colorList[5];
                  } else if (
                    params.data !== null &&
                    params.data["value"] &&
                    params.data["value"][3] == "color7"
                  ) {
                    return colorList.colorList[6];
                  } else if (
                    params.data !== null &&
                    params.data["value"] &&
                    params.data["value"][3] == "color8"
                  ) {
                    return colorList.colorList[7];
                  } else if (
                    params.data !== null &&
                    params.data["value"] &&
                    params.data["value"][3] == "color9"
                  ) {
                    return colorList.colorList[8];
                  } else {
                    return colorList.colorList[9];
                  }
                }
              }
            },
            zlevel: 10,
            data: this.newData,
            emphasis: {
              focus: "series"
            },
            animationDelay: function(idx) {
              return idx * 10;
            }
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 8,
            barGap: "-100%",
            data: this.lenBg,
            itemStyle: {
              normal: {
                color: "#151617"
              }
            },
            zlevel: 0,
            emphasis: {
              focus: "series"
            },
            animationDelay: function(idx) {
              return idx * 10;
            }
          }
        ],
        animationEasing: "bounceOut", // bounceInOut //elasticInOut //elasticIn //bounceOut //bounceIn
        animationDelayUpdate: function(idx) {
          return idx * 5;
        }
      };
      myChart.clear();
      // console.log(option);
      myChart.setOption(option, true);
    }
  }
};
</script>

<style lang="scss" scoped>
.customContent{
  width: 635px;
  margin: 50px auto;
}
</style>
